<template>
    <div class="Searchindex">
        <div class="head">
            <i class="yo-ico" @click="clickBackHandle">&#xe60c;</i>
            <input type="text" placeholder="大家都在搜 腹肌" key=""
                 @keyup.enter="search"
            >
        </div>
        <div class="historyHead">
            <span>历史搜索</span>
            <i class="yo-ico" @click="clickClear">&#xe633;</i>
        </div>
        <ul class="history">
            <li v-for="li in list" @click="search">
                {{li}}
            </li>
        </ul>
        <div class="hotSearchHead"><b>热门搜索</b><i class="yo-ico" @click="clickFold">&#xe65f;</i></div>
        <ul class="hotSearch">
            <li v-for="(a,index) in arr" @click="search">
                <i v-if="index<=2" class="yo-ico">&#xe629;{{a}}</i>
                <i v-else class="yo-ico">{{a}}</i>
            </li>
           
        </ul>
    </div>
</template>

<script>

    export default ({
        data(){
            return {
                list:[
                    "马甲线","马甲","背阔肌","肱二头","肱三头","股骨头","腹肌","胸肌","人鱼线","斜方肌"
                ],
                arr:["马甲线","马甲","背阔肌","肱二头","肱三头","股骨头"]
            }
        },
        methods:{
            search(){
                this.$router.push("/search/result")
            },
            clickClear(){
                this.list=[];
            },
            clickBackHandle(){
                this.$router.back()
            },
            clickFold(){
                var hotSearch=document.querySelector(".hotSearch");
                
                hotSearch.classList.toggle("target");
            }
        }
    })
</script>

<style lang='stylus' scoped>
    .Searchindex
        display flex
        flex-direction column
        width 100%
        height 100vh
        padding 0 6%
        margin-top 9%

        .head
            // margin 3% 0
            height 10%
            line-height 10%
            i 
                padding 0 10px 0 5px
                font-weight 900
            input 
                border-radius .2rem
                border none
                background-color #f2f2f2
                height 50%
                width 89%
                padding-left 3%

            input::-webkit-input-placeholder
                font-size 12px
                color #ccc
                font-weight 100
    .historyHead
        width 100%
        height 4%
        line-height 4%
        display flex
        justify-content space-between
        font-size 18px  

        span 
            font-weight 900  
    .history
        width 100%
        height 12%
        display flex
        flex-wrap  wrap

        li 
            width 15%    
            height 30%
            font-size .12rem
            overflow hidden
            white-space nowrap 
            line-height 30%
            background-color #ccc 
            text-align center
            padding-top 3%
            border-radius  20rem
            margin 0 2%
    .hotSearchHead
        width 100%
        height 4%
        line-height 4%
        display flex
        justify-content space-between
        font-size 18px  
        margin 5% 0 2% 0
    .hotSearch
        padding-left 3%
        display flex
        width  100%
        height 1.2rem
        flex-wrap  wrap
        li
            width 50%
            font-size .12rem
    .target
        transform 2s
        opacity  0
</style>